import React, { useEffect, useState } from "react";
import "./style.scss";

const user_id = 1; // 2  |  3
const server_id = 78888;  // 随便
const ws = new WebSocket(
  `ws:124.221.74.149:8003/koa/ws?user_id=${user_id}&server_id=${server_id}`
);

const App = () => {
  const [message, setMessage] = useState("");
  const [chatList, setChatList] = useState([]);
  const submit = () => {
    ws.send(
      JSON.stringify({
        type: "addMessage",
        data: {
          user_id,  // 你是谁
          server_id,  // 对方是谁
          message,  // 发送的消息
        },
      })
    );
  };

  useEffect(() => {
    ws.addEventListener("message", (res) => {
      console.log(JSON.parse(res.data));
      const { type, data } = JSON.parse(res.data);
      if (type === "getChatList") {
        setChatList(data);
      } else if(type === "addMessage") {
        setChatList((prev) => [...prev, data]);
      }
    });
    ws.addEventListener("open", () => {
      console.log("和远程webscoket服务器建立了链接！！！");
      // 获取默认聊天记录
      ws.send(
        JSON.stringify({
          type: "getChatList",
        })
      );
    });
  }, []);

  return (
    <div className="chat">
      <div className="title">张三</div>
      <div className="chat-list">
        {chatList.map((v, i) => {
          const clsssNameParams = "chat-list-item-" + (v.dir === 1 ? "right" : "left")
          const avatarUrl = v.dir === 1 ? v.user_avatar : v.server_avatar
          return (
            <div
              className={clsssNameParams}
              key={i}
            >
              <div className="avatar">
                <img
                  src={avatarUrl}
                  alt=""
                />
              </div>
              <div className="content">
                <div className="text">
                  {v.message}
                </div>
                <div className="image"></div>
                <div className="video"></div>
              </div>
            </div>
          );
        })}

        {/* <div className="chat-list-item-right">
          <div className="avatar">
            <img
              src="https://marketplace.canva.cn/EAEezxOGcOA/1/0/400w/canva-%E7%81%B0%E8%93%9D%E8%89%B2520%E6%A0%A1%E5%9B%AD%E7%94%B7%E7%94%9F%E5%8D%A1%E9%80%9A%E4%B8%AA%E4%BA%BA%E6%BC%AB%E7%94%BB%E5%BE%AE%E4%BF%A1%E5%A4%B4%E5%83%8F-s2PSiwo9Pg8.jpg"
              alt=""
            />
          </div>
          <div className="content">
            <div className="text">
              可以先跟赵康聊聊，看看他学习上的困难在哪。也可以给他制定个适合的学习计划，从简单的开始，慢慢建立信心。或者找个学习好的同学跟他搭伴学习，你觉得怎么样？
            </div>
            <div className="image"></div>
            <div className="video"></div>
          </div>
        </div> */}
      </div>
      <div className="opration">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button className="submit" onClick={() => submit()}>
          发送
        </button>
      </div>
    </div>
  );
};

export default App;
